<template>
  <div ref="containerRef" class="screen-center">
    <component
      :is="item.component"
      v-for="item in components"
      :key="item.name"
      class="screen-center-item"
      :name="item.name"
    >
      <Center1 />
    </component>
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue';
import { useSortable } from '@/utils/useSortable';

import Center1 from './center1.vue';
import Center2 from './center2.vue';
import Center3 from './center3.vue';
const components = shallowRef([
  { name: 'center1', component: Center1 },
  { name: 'center2', component: Center2 },
  { name: 'center3', component: Center3 },
]);

const { containerRef } = useSortable(components);
</script>

<style lang="scss">
.screen-center {
  width: 100%;
  height: 100%;
  .screen-center-item {
    width: 100%;
    height: 32%;
    // background-color: var(--es-block-bg);
    padding: 16px;
    animation-name: slide;
    & + & {
      margin-top: 20px;
    }
  }
}
</style>
